<!--
 * @Author: wuyuxin
 * @Date: 2022-01-10 15:59:08
 * @LastEditors: wuyuxin
 * @LastEditTime: 2022-01-12 11:41:33
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a onclick="a()">应用1</a>
  <a onclick="b()">应用2</a>
  <!-- <a href="#app1">应用1</a>
  <a href="#app2">应用2</a> -->
  <script src="/lib/umd/single-spa.js"></script>
  <script>
    function a() {
      history.pushState({}, '', '/a')
    }
    function b() {
      history.pushState({}, '', '/b')
    }
    // 参数 1)注册应用的名字 2)加载app的方法，必须是返回一个promise方法
    singleSpa.registerApplication('app1',
      async () => {
        console.log('加载1时执行')
        // 这个函数需要返回结果
        return {
          // 可传多个函数
          bootstrap: [
            async () => { console.log('bootstrap1') },
            async () => { console.log('bootstrap2') },
            async () => { console.log('bootstrap3') },
          ],
          // bootstrap: async () => {
          //   console.log('bootstrap')
          // },
          mount: async () => {
            console.log('mount1')
          },
          unmount: async () => {
            console.log('unmount1')
          }
        }
      },
      // activeWhen， 什么时候激活加载这个应用
      location => location.pathname.startsWith('/a'),
      // location => location.hash.startsWith('#app1'),
      {store:{name:'1', age:1}}
    )
    // 参数 1)注册应用的名字 2)加载app的方法，必须是返回一个promise方法
    singleSpa.registerApplication('app2',
      async () => {
        console.log('加载2时执行')
        // 这个函数需要返回结果
        return {
          // 可传多个函数
          // bootstrap: [
          //   async () => { console.log('bootstrap1') },
          //   async () => { console.log('bootstrap2') },
          //   async () => { console.log('bootstrap3') },
          // ],
          bootstrap: async () => {
            console.log('bootstrap222')
          },
          mount: async () => {
            console.log('mount222')
          },
          unmount: async () => {
            console.log('unmount222')
          }
        }
      },
      // activeWhen， 什么时候激活加载这个应用
      // location => location.hash.startsWith('#app2'),
      location => location.pathname.startsWith('/b'),
      {store:{name:'1', age:1}}
    )
    singleSpa.start(); // 启动这个应用

    // registerApplication 默认会加载应用
    // start 是会挂载应用
    window.addEventListener('hashchange', () => {

    })
  </script>
</body>
</html>